<template>
    <el-container class="layout-container">
        <el-main class="layout-main">
            <div class="main-left">
                <div class="headline">{{sysTitle}}</div>
                <!--<div class="headline">车站客运班车售票管理系统</div>-->
                <!--<div class="headline">中尔车站客运班车点名后台管理端软件</div>-->
                <div class="bg"></div>
            </div>
            <div class="main-right">
                <div class="title">欢迎登录</div>
                <div class="form-wrap">
                    <el-form ref="formRef" :model="formData" :rules="rules">

                        <div class="ipt-wrap">
                            <el-form-item prop="user">
                                <el-input
                                        class="ipt"
                                        v-model="formData.user"
                                        type="text"
                                        placeholder="手机"
                                        size="large"
                                        @keydown.enter="login"
                                >
                                    <template #prefix>
                                        <i class="iconfont icon-phone"></i>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </div>
                        <div class="ipt-wrap">
                            <el-form-item prop="password">

                            <el-input
                                    class="ipt"
                                    v-model="formData.password"
                                    type="password"
                                    placeholder="密码"
                                    show-password
                                    size="large"
                                    @keydown.enter="login"
                            >
                                <template #prefix>
                                    <i class="iconfont icon-pwd"></i>
                                </template>
                            </el-input>
                            </el-form-item>
                        </div>
                        <div class="ipt-wrap">
                            <el-form-item prop="identifyCode">

                                <el-input
                                        ref="idenIptRef"
                                        class="ipt"
                                        v-model="formData.identifyCode"
                                        type="text"
                                        placeholder="验证码"
                                        size="large"
                                        @keydown.enter="login"
                                >
                                    <template #prefix>
                                        <i class="iconfont icon-yzm"></i>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <m-identify-code ref="identifyRef" v-model:code="identifyCode" :contentHeight="48"></m-identify-code>

                        </div>
                        <div class="ipt-wrap">
                            <el-checkbox v-model="rememberPhone" label="记住手机号" size="large"/>
                        </div>
                    </el-form>
                </div>
                <el-button type="primary" class="login-btn" @click="login" :loading="loading">登录</el-button>
            </div>
        </el-main>
        <!--<el-footer class="layout-footer">
            <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备17130885号-3</a>
        </el-footer>-->
    </el-container>
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {useStore} from "vuex"
import { useRouter } from 'vue-router'

import MIdentifyCode from '@/components/common/IdentifyCode/IdentifyCode'
import {setLocalStore,getLocalStore} from "../../utils/store";

const store = useStore();
const router = useRouter();

const sysTitle = process.env.NODE_ENV === 'development' ? process.env.VUE_APP_SYSTITLE : window.webConfig.webSystemTitle;
    let password = ref(''),
      phone = ref(''),
      idenIptRef = ref(null),
      identifyCode = ref(null),
      identifyRef = ref(null),
      rememberPhone = ref(false),
      formData = reactive({
        user: '',
        password: '',
        identifyCode: ''
      }),
      formRef = ref(null),
      loading = ref(false);

    const login = () => {
      loading.value = true;

      formRef.value.validate(valid => {
        if (valid){
          if (!identifyRef.value.validate(formData.identifyCode)) {
            loading.value = false;
            identifyRef.value.refresh();
            ElMessage({type: 'error',message: '验证码不正确'});
            idenIptRef.value.select();
            return
          }
          let param = {
            "user": formData.user,
            "password": formData.password,
            // "db_id": "string",
            // "company_id": "string"
          }
          store.dispatch('login',param).then(async res=>{
            loading.value = false;
            store.commit('DEL_ALL_TAB')

            if (rememberPhone.value){
              setLocalStore('user_id',param.user)
              setLocalStore('is_remember',true)
            }

            await store.dispatch('getAuth');
            // router.replace('/');
            location.href = './dataBoard';
          },()=>{
            loading.value = false;
            identifyRef.value.refresh();
          })
        }
        else loading.value = false;
      })
    }

    const validateCode = (rule,value,callback) =>{
      if (!value) callback(new Error('请输入验证码'))
      else if (value.toLowerCase() != identifyCode.value.toLowerCase()) {
        identifyRef.value.refresh();
        callback(new Error('验证码不正确'))
      }
      else callback();
    };

    let rules = {
        user: [
          { required: true, message: '请输入用户账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
        ],
        identifyCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          // {validator: validateCode, trigger: 'blur' },
        ],
      };
    onMounted(()=>{
      let is_remember = getLocalStore('is_remember'),
        user = getLocalStore('user_id');
      rememberPhone.value = is_remember;
      formData.user = user;
      formData.password = ''
      formData.identifyCode = '';
    })
</script>

<style scoped lang="less">
    .layout-container{
        height: 100vh;
        min-width: 1000px;
        display: flex;
        width: 100%;
        flex-direction: column;
        background: url("../../assets/images/login/login_bg.png"), linear-gradient(to bottom right, #0353ff, #30c8e8);
        background-size: auto 100%;
        .layout-main{
            display: flex;
            align-items: center;
            padding: 0 120px;
            .main-left{
                align-self: center;
                height: 56vh;
                flex: 1;
                background: url(../../assets/images/login/login_bg2.png) no-repeat center bottom;
                background-size: auto 68%;
                padding: 40px 0 50px;
                box-sizing: border-box;
                .headline{
                    font-weight: bold;
                    font-size: 56px;
                    margin-bottom: 25px;
                    width: 100%;
                    letter-spacing: 8px;
                    color: #fff;
                    text-align: center;
                }
            }
            .main-right{
                height: 54vh;
                width: 400px;
                border-radius: 10px;
                background: rgba(255, 255, 255, 0.6);
                padding: 3.2vh 3.4vh 0;

                .title{
                    color: #282828;
                    font-size: 3.6vh;
                    letter-spacing: 10px;
                }
                .form-wrap{
                    padding: 30px 0;
                    .ipt-wrap{
                        margin-bottom: 20px;
                        display: flex;
                        ::v-deep{
                            .el-form-item{
                                width: 100%;
                            }
                        }
                        .ipt{
                            height: 50px;
                        }
                        .iconfont{
                            font-size: 20px;
                        }
                    }
                }
                .login-btn{
                    width: 100%;
                    height: 50px;
                    text-align: center;
                    letter-spacing: 50px;
                    text-indent: 50px;
                    font-size: 30px;
                }
            }
        }
        .layout-footer{
            display: flex;
            align-items: center;
            justify-content: center;
            a{
                text-decoration: none;
                color: #ffffff;
            }
        }
    }
</style>
